import React from 'react';
import { eventTrack } from '@/utils/track';
import { Form, Modal, Button, message } from 'antd';
import { connect } from 'umi';
import { SelectForm, CascaderForm } from '@/components/UserForm'; // 模糊查询
import request from '@/utils/request';
import { getApplyjob } from '@/services/components/userform';
import clone from 'lodash/clone';
// const { Option } = Select;

const formLayout = {
    labelCol: {
        md: { span: 8 },
        xs: { span: 8 },
        sm: { span: 8 }
    },
    wrapperCol: {
        md: { span: 12 },
        xs: { span: 12 },
        sm: { span: 12 }
    }
};

const PositionModal = prop => {
    const {
        // talentPool,
        dispatch,
        form,
        loading,
        candidate,
        visible,
        setvisible,
        onGetquerycandidatesbytalent,
        query
    } = prop;

    const { getFieldDecorator } = form;

    // const querylist = talentPool.querylistList; // 应聘职位列表
    const [departmentId, setDepartmentId] = React.useState('');
    const user = localStorage.getItem('user');
    const { companyId } = user ? JSON.parse(user) : {};

    // modal取消
    const handleCancel = () => {
        form.resetFields(['recruitCode', 'departmentId']);
        setDepartmentId('');
        setvisible(false);
        // 埋点
        eventTrack({
            eventName: 'personnel_management_recruit_talentPool_detail_add_cancel_click'
        });
    };
    // modal提交
    const handleOk = () => {
        form.validateFields(['departmentId', 'recruitCode'], (err, values) => {
            if (!err) {
                dispatch({
                    type: 'talentPool/generatecandidate',
                    payload: {
                        recruitCode: values.recruitCode,
                        talentCode: query.code ? query.code : '',
                        departmentId
                    },
                    callback: res => {
                        if (res.code === 10000) {
                            message.success(res.msg);
                            onGetquerycandidatesbytalent();
                            setvisible(false);
                            // 埋点
                            eventTrack({
                                eventName: 'personnel_management_recruit_talentPool_detail_add_submit_click',
                                eventProps: { status: '0' }
                            });
                        } else {
                            message.error(res.msg);
                        }
                    }
                });
            } else {
                // 埋点
                eventTrack({
                    eventName: 'personnel_management_recruit_talentPool_detail_add_submit_click',
                    eventProps: { status: '1', error_info: JSON.stringify(err) }
                });
            }
        });
    };

    const departmentChange = value => {
        setDepartmentId(clone(value).pop());
        form.resetFields('recruitCode');
    };
    return (
        <Modal
            visible={visible}
            title="添加应聘职位"
            onOk={handleOk}
            onCancel={handleCancel}
            footer={[
                <Button key="back" onClick={handleCancel}>
                    取消
                </Button>,
                <Button
                    key="submit"
                    type="primary"
                    loading={loading.effects['talentPool/generatecandidate']}
                    onClick={handleOk}
                >
                    提交
                </Button>
            ]}
        >
            <Form layout="horizontal" {...formLayout}>
                <Form.Item label="姓名" style={{ marginBottom: 0 }}>
                    {candidate.talentName}
                </Form.Item>
                <Form.Item label="应聘部门">
                    {getFieldDecorator('departmentId', {
                        rules: [
                            {
                                required: true,
                                message: '请选择应聘职位'
                            }
                        ]
                    })(
                        <CascaderForm
                            getData={() =>
                                request('/api/org/v1/functional/list').then(res => {
                                    if (res && res.code === 10000 && res.data) {
                                        return res.data || [];
                                    }
                                    return [];
                                })
                            }
                            fieldsName={{
                                selectValue: 'id',
                                selectTitle: 'departmentName',
                                selectChildren: 'children'
                            }}
                            onChange={departmentChange}
                            selectProps={{
                                placeholder: '请选择部门',
                                changeOnSelect: true,
                                expandTrigger: 'hover'
                            }}
                        />
                    )}
                </Form.Item>
                <Form.Item
                    label="应聘职位"
                    help="注：该人才将成为选择的应聘职位的候选人，并针对该职位开展筛选、面试等招聘工作。"
                >
                    {getFieldDecorator('recruitCode', {
                        rules: [
                            {
                                required: true,
                                message: '请选择应聘职位'
                            }
                        ]
                    })(
                        <SelectForm
                            params={{
                                companyId: departmentId ? '' : companyId,
                                departmentId,
                                recruitSchedule: 'recruit_hiring'
                            }}
                            // requireParam={['companyId ']}
                            getData={params =>
                                getApplyjob(params).then(res => {
                                    if (res && res.code === 10000 && res.data) {
                                        return res.data || [];
                                    }
                                    return [];
                                })
                            }
                            fieldsName={{
                                selectValue: 'recruitCode',
                                selectTitle: 'recruitName'
                            }}
                            // onChange={this.companyChange}
                            selectProps={{
                                placeholder: '请选择应聘职位',
                                style: { minWidth: 200 }
                            }}
                        />
                    )}
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default connect(({ loading, talentPool }) => ({
    loading,
    talentPool
}))(Form.create()(PositionModal));
